<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><!-- 必要的标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"> <!-- Bootstrap CSS --> <link crossorigin="anonymous" integrity="sha512-6KY5s6UI5J7SVYuZB4S/CZMyPylqyyNZco376NM2Z8Sb8OxEdp02e1jkKk/wZxIEmjQ6DRCEBhni+gpr9c4tvA==" href="https://lib.baomitu.com/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap-theme.css}">
    <link rel="stylesheet" th:href="@{/css/game.css}">
</head>
<body>


<nav th:replace="layouts::navbar"></nav>

<div class="container">
    <h3>主面板</h3>
    <p th:text="${versionNumber}"></p>





  <div>
    <h4>胖大爹Game</h4>
     <table>
        <thead>
            <tr>
                <th>游戏名称</th>
                <th>游戏类型</th>

            </tr>
     </thead>
         <tbody>
            <tr th:each="aGame : ${games}">
                <td th:text="${aGame.name}"></td>
                <td th:text="${aGame.description}"></td>
                <td></td>
            </tr>
        </tbody>
    </table>
  </div>
    <div>
        <h4>玩家信息</h4>
        <table>
            <thead>
            <tr>
                <th>账户名称</th>

                <th>游戏数量</th>
            </tr>
            </thead>
            <tbody>
                <tr th:each="aPlayer : ${playerProjects}">
                    <td th:text="${aPlayer.name}"></td>
                    <td th:text="${aPlayer.projectCount}"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-4">
        <canvas id="myPieChart" height="50"width="50"></canvas>
    </div>
</div>
<script type="text/javascript" th:src="@{js/myChart.js}"></script>
</body>
</html>